<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <script src="/js/jquery-3.5.1.min.js" type="text/javascript"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">XXX管理系统</div>

        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item">
                <a href="/views/ddjh/daDdjh.html">调度计划</a>
                <!--                <dl class="layui-nav-child">-->
                <!--                    <dd><a href="">移动模块</a></dd>-->
                <!--                    <dd><a href="">后台模版</a></dd>-->
                <!--                    <dd><a href="">电商平台</a></dd>-->
                <!--                </dl>-->
            </li>
            <li class="layui-nav-item">
                <a href="/views/fhyc/stFhyc.html">负荷预测</a>
                <!--                <dl class="layui-nav-child">-->
                <!--                    <dd><a href="">移动模块</a></dd>-->
                <!--                    <dd><a href="">后台模版</a></dd>-->
                <!--                    <dd><a href="">电商平台</a></dd>-->
                <!--                </dl>-->
            </li>
            <li class="layui-nav-item">
                <a href="/views/sjxh/daSjxh.html">省间现货</a>
                <!--                <dl class="layui-nav-child">-->
                <!--                    <dd><a href="">移动模块</a></dd>-->
                <!--                    <dd><a href="">后台模版</a></dd>-->
                <!--                    <dd><a href="">电商平台</a></dd>-->
                <!--                </dl>-->
            </li>
        </ul>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="/images/ha.jpg" class="layui-nav-img">
                    tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">Your Profile</a></dd>
                    <dd><a href="">Settings</a></dd>
                    <dd><a href="">Sign out</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">日前模块</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;" class="menu_three">日前计划运行监视</a>
                            <ol class="layui-nav-child" style="display: none;">
                                <li><a href="/views/ddjh/daDdjh_table.html">表格</a></li>
                                <li><a href="/views/ddjh/daDdjh.html">曲线图</a></li>
                                <li><a href="/views/ddjh/daDdjh_avg.html">平均准确率</a></li>
                            </ol>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <div class="layui-form" style="text-align: center">
            <div style="margin: 15px 15px" class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">开始日期：</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="date1" placeholder="yyyy-MM-dd">
                    </div>
                    <label class="layui-form-label">结束日期：</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="date2" placeholder="yyyy-MM-dd">
                    </div>
                    <input id="bt" type="button" data-abc="reload1" class="layui-btn layui-btn-primary" value="查 询"/>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space12">
            <div class="layui-col-md12">
                <div class="layui-panel">
                    <table id="table1" class="layui-hide" id="test"></table>
                </div>
            </div>
        </div>
    </div>
    <!--    <div class="layui-footer">-->
    <!--        &lt;!&ndash; 底部固定区域 &ndash;&gt;-->
    <!--        底部固定区域-->
    <!--    </div>-->
</div>

<script src="/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['element', 'layer', 'util', 'laydate', 'table'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$
            , laydate = layui.laydate
            , table = layui.table;

        laydate.render({
            elem: '#date1',
            format: 'yyyy-MM-dd',
            value: new Date()
        });
        laydate.render({
            elem: '#date2',
            format: 'yyyy-MM-dd',
            value: new Date()
        });
        var pdate1 = $("#date1").val();
        var pdate2 = $("#date2").val();
        table.render({
            elem: '#table1'
            , url: '/ddjh/da/getSwyd_avg'
            , where: {
                pdate1: pdate1,
                pdate2: pdate2
            }
            , page: false
            , id: 'tableId'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , id: 'testTable'
            , cols: [[
                {
                    field: '0', align: 'center', title: '单位', templet: function (d) {
                        return '<div style="text-align: center">' + d[0] + '</div>'
                    }
                }
                , {
                    field: '1', align: 'center', title: '日期', templet: function (d) {
                        return '<div style="text-align: center">' + d[1] + '</div>'
                    }
                }
                , {
                    field: '2', align: 'center', title: '平均准确率', templet: function (d) {
                        return '<div style="text-align: center">' + d[2] + '</div>'
                    }
                }
            ]],
            align: 'center',
            done: function (res) {
                console.log(res);
            }
        });
        var active = {
            reload1: function () {
                var pdate1 = $('#date1').val();
                var pdate2 = $('#date2').val();
                table.reload('testTable', {
                    where: {
                        pdate1: pdate1,
                        pdate2: pdate2
                    }
                });
            }
        };
        $('#bt').on('click', function () {//绑定点击事件
            var type = $(this).data('abc');
            active[type] ? active[type].call(this) : '';
        });
        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            , menuRight: function () {
                layer.open({
                    type: 1
                    , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    , area: ['260px', '100%']
                    , offset: 'rt' //右上角
                    , anim: 5
                    , shadeClose: true
                });
            }
        });
        $(".menu_three").on("click", function () {
            $(this).next().toggle();
            $.each($(this).parent().siblings(), function (i, e) {
                $(e).find("ol").hide();
                ;
            });
        })
        // $("ol").on("click", "li a", function () {
        //     $.each($(this).parent().siblings(), function (i, e) {
        //         $(e).find("a").removeClass('three_this')
        //     });
        //     $(this).addClass('three_this');                            // 添加当前元素的样式
        // });
    });
</script>
</body>
</html>